<template>
  <div class="record">
    <el-dialog title="出入记录" height="600px" :visible.sync="recordVisible" width="60%">
      <JNPF-table :data="tablelist" height="300px"  :default-sort = "{prop: 'inouttime', order: 'descending'}" border v-loading="listLoading" >
        <el-table-column prop="mjdbh" label="门禁点编号"></el-table-column>
        <el-table-column prop="mjdmc" label="门禁点名称"></el-table-column>
        <!-- <el-table-column prop="statu" label="进出状态">
          <template slot-scope="scope">
            <p>{{
              scope.row.statu | filterStatus
              }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="inouttype" width="100px" label="进出车辆/人员">
            <template slot-scope="scope">
            <p>{{
              scope.row.inouttype=="0" ?"人" :"车辆"
              }}</p>
          </template>
        </el-table-column> -->
        <el-table-column prop="inoutname" width="100px" label="人名或车牌号"></el-table-column>
        <el-table-column prop="inouttime" width="110px" label="进出时间" sortable>
        </el-table-column>
        <el-table-column prop="f_fullname" label="所属单位"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="lookImg(scope.row.fj)" class="JNPF-table-delBtn">
              图片查看
            </el-button>
          </template>
        </el-table-column>
      </JNPF-table>
      <!-- <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          class="pagination"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[10,20,100,200]"
          :page-size="limit"
          layout="total, sizes, prev, pager, next, jumper"
          background
          :total="total">
        </el-pagination>
      </div> -->
      <pagination :total="total" :page.sync="page" :limit.sync="limit" @pagination="getTableList(bh)" />
      <div slot="footer" class="dialog-footer">
        <el-button @click="recordVisible = false" class="button">取 消</el-button>
      </div>
      <IMG v-if="imgVisible" ref="imgSize" />
    </el-dialog>
  </div>
</template>

<script>
import APIURl from '@/utils/define'
import request from '@/utils/request'
import IMG from './img';
import { logout } from '@/api/user';
export default {
  components:{IMG},
  name: 'record',
  data() {
    return {
      pathUrl :'',
      recordVisible:false,
      imgVisible:false,
      tablelist: [],
      listLoading: false,
      total: 0,
      bh: '',
      limit:10,
      page:1,
    }
  },
  // filters: {
  //   filterStatus: (val) => {
  //     if(val == "0") {
  //       return '进'
  //     } else {
  //       return '出'
  //     }
  //   }
  // },
  computed: {
    out(val){
      console.log(123456,val);
      if(val === 0) return "人"
      if(val === 1) return "车辆"
    }
  },
  methods:{
    // 图片查看
    lookImg(path){
      this.pathUrl = APIURl.APIURl + path;
      this.imgVisible = true
      this.$nextTick(() => {
        this.$refs.imgSize.initImg(this.pathUrl)
      })
    },
   
    initRecord(bh) {
      this.recordVisible = true
      this.getTableList(bh)
    },
    getTableList(bh) {
      this.bh = bh
      this.tablelist = [],
      // this.total = 0
      this.listLoading = true
      let limit = this.limit
      let page = this.page
      request({
        url: `/api/System/RQBJ/Actions/MJDCRJL/${bh}/${limit}/${page}`,
        methods: 'get',
        // data: query
      }).then(data => {
        let res = data.msg.replace(/[\\]/g, '')
        let result = JSON.parse(res)
        this.tablelist = result.data
        if(this.tablelist.length <= 0) {
          this.total = 0
        }
         else {
          this.total = Number(this.tablelist[0].num)
        }
        
      })
      this.listLoading = false
    },
    handleSizeChange(val) {
      this.limit = val
      this.getTableList(this.bh)
    },
  }
}
</script>
<style lang="scss" scoped>
  .record {
    position: relative;
    >>>.pagination {
      position: absolute;
      left: 50%;
      top: 80%;
      transform: translate(-50%, -50%);
    }
    // .dialog-footer {
    //   margin-top: 100px;
    // }
  }
</style>